<template>
	<view class="bg-light flex flex-column" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 编辑 -->
		<view class="font bg-white justify-end align-center px-3 flex" v-if="shopCar.length > 0 ? true : false"
			style="height: 70rpx; line-height: 70rpx;" @click="switchMethods">
			<view class="mr-3" style="widht:2rpx; border-left: 1px solid #ababab; height:38rpx;">
			</view>
			{{ !switchBoolean ? "编辑" : "完成" }}
		</view>
		<!--  -->
		<view class="w-100 flex justify-center align-center flex-column" v-if="shopCar.length > 0 ? false : true"
			style="height: 80vh">
			<view class="flex flex-column align-center mb-4" style="width: 50%">
				<image style="width: 600rpx" :src="Domain_ICON + '/zanwugouwu.png'" mode="widthFix"></image>
				暂未相关购买记录,赶紧去买点东西犒劳下自己吧
			</view>
			<view @click="goIndex()" class="pr-10 pl-10 pt-1 pb-1 flex justify-center align-center font-weight-bold font-md"
				style="color: orange; border: 2rpx solid orange; border-radius: 30rpx">去购物</view>
		</view>
		<!-- 卡片 -->
		<scroll-view scroll-y="true" class="scroll-Y" v-else>
			<view @click="changeAll(index)" v-for="(item, index) in shopCar" :key="index"
				class="m-3 rounded-lg flex bg-white align-center" style="position: relative">
				<uni-swipe-action class="w-100">
					<uni-swipe-action-item class="w-100" :right-options="options2" :show="isOpened" :auto-close="false"
						@click.stop="deleteGoods(item.Sales_Order_SerialNumber, index)">
						<view class="flex align-center p-2">
							<checkbox style="transform: scale(0.7)" :disabled="!item.isShow" :checked="item.isSettle" />
							<view class="flex flex-column">
								<view class="ml-1 flex">
									<view class="flex-shrink" style="position: relative;">
										<image :lazy-load="true" @click.stop="
											goDetail(
												item.Article_SerialNumber,
												item.Sales_Unit_Price_SerialNumber,
												item.Store_SerialNumber,
												item.Sales_Unit_Price
											)
											" :src="Domain_IMG + item.Picture_URL" class="rounded" style="width: 160rpx;
										height: 160rpx" mode="">
										</image>
										<view v-if="!item.isShow"
											class="rounded font text-white flex justify-center align-center" style="
													position: absolute;
													top: 0;
													left: 0;
													width: 160rpx;
													height: 160rpx;
													background-color: rgba(0, 0, 0, 0.7);
												">
											已下架
										</view>
									</view>
									<view class="ml-2 text-ellipsis" style="width: 400rpx; position: relative">
										<text class="font">{{ item.Article_Name }}</text><br />
										<text class="font-sm text-muted">品牌:{{ item.Category_Name }}</text><br />
										<text class="font-sm text-muted">规格:{{ item.Specifications_Name }}</text>
										<text class="text-info font font-weight-bold"
											style="position: absolute; bottom: 0; left: 0">￥{{ Price(item.Amount) }}</text>
										<view v-if="item.isShow" class="flex"
											style="position: absolute; bottom: 0; right: 0">
											<view @click.stop="subGoods(item)"
												class="font-md text-center flex justify-center align-center" style="
														background-color: #eee;
														width: 50rpx;
														height: 50rpx;
														">-</view>
											<input @click.stop="" type="number" v-model="item.quantity"
												class="text-center font" style="
													border-left: 2rpx solid #ddd;
													border-right: 2rpx solid #ddd;
													width: 50rpx;
													height: 50rpx;
													background-color: #eee;
													" />
											<view @click.stop="addGoods(item)"
												class="font-md minus text-center flex justify-center align-center" style="
													background-color: #eee;
													width: 50rpx;
													height: 50rpx;
													">+</view>
										</view>
									</view>
								</view>
								<!-- 付款方式 -->
								<view class=" m-auto rounded-lg py-1 p-2 bg-light box-sizing mt-2"
									style="width: 100%; border-radius: 20rpx;">
									<view class="font-small  zq mt-2 flex justify-start pb-2"
										style="border-bottom: 1px solid #000;">
										<view class="font-sm px-2 py-1" v-for="(value, key, index) in item.Paystages"
											:key="key" @click.stop="toggleStyle(item, key)"
											:class="item.isActive == key ? 'text-blue' : 'text-body'"
											style="border: 1px solid #000;">
											方案{{ index + 1 }}
										</view>
									</view>
									<!-- 展示细则 -->
									<view class="mt-2 m-auto font-small bg-light">
										<text class="h3 font-weight-bold font"
											v-if="item.Paystages[item.isActive].Full_Payment">全款细则</text>
										<view :class="{ active: form.Transaction_Type == 0 && isActive1 == isActive }"
											v-if="item.Paystages[item.isActive].Full_Payment">
											<view class="border-bottom border-muted flex align-center justify-between "
												style="
														height: 60rpx;
														line-height: 60rpx;">
												<view class="font-sm">付款类型</view>
												<view class="font-sm">折扣</view>
												<view class="font-sm">优惠总价</view>
											</view>
											<view class="flex align-center justify-between text-center" style="
														height: 60rpx;
														line-height: 60rpx;">
												<view class="font-sm">
													{{ item.Paystages[item.isActive].Full_Payment.Trading_Explain }}
												</view>
												<view class="font-sm">
													{{ item.Paystages[item.isActive].Full_Payment.Trading_Percentage }}%
												</view>
												<view class="font-sm">
													{{ (item.Paystages[item.isActive].Unit_Price *
														item.Paystages[item.isActive].Full_Payment.Trading_Percentage) / 100 }}元
												</view>
											</view>
										</view>
										<view class="mt-2"></view>
										<text class="h3  font"
											v-if="item.Paystages[item.isActive].Payment_Days">步骤付款细则</text>
										<view :class="{ active: form.Transaction_Type == 1 && isActive1 == isActive }"
											v-if="item.Paystages[item.isActive].Payment_Days">
											<view class=" border-bottom border-muted flex align-center justify-between"
												style="
														height: 60rpx;
														line-height: 60rpx;">
												<view class="font-sm">付款阶段</view>
												<view class="font-sm">额度</view>
												<view class="font-sm">金额计算</view>
											</view>
											<view>
												<view class="flex align-center justify-between text-center"
													v-for="(item2, index2) in item.Paystages[item.isActive].Payment_Days"
													:key="index2" style="
														height: 60rpx;
														line-height: 60rpx;">
													<view class="font-sm">{{ item2.Trading_Explain }}</view>
													<view class="font-sm">{{ item2.Trading_Percentage }}%</view>
													<view class="font-sm">
														{{ (item2.Unit_Price * item2.Trading_Percentage) / 100 }}元
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>
		<!-- 底部 -->
		<view id="fixed" class="bg-white py-1 px-3 fixed-bottom flex justify-between align-center" style="bottom: 110rpx"
			v-if="!switchBoolean">
			<view class="font-sm flex align-center" @click="changeAll_">
				<checkbox style="transform: scale(0.7)" :checked="isSettle" />全选
			</view>

			<view class="flex align-center">
				<view class="font mr-2">
					合计<text class="font-weight-bold font-md">￥{{ Price(Quantity) }}</text>
				</view>
				<view class="bg-info rounded text-center py-2 text-white font-sm" style="width: 220rpx"
					@click="handleSkip(1)" hover-class="bg-hover-info" :hover-stay-time="150">去结算</view>
			</view>
		</view>
		<!-- 多删除 -->
		<view id="fixed" class="bg-white py-1 px-3 fixed-bottom flex justify-between align-center" style="bottom: 110rpx"
			v-else>
			<view class="font-sm flex align-center" @click="changeAll_">
				<checkbox style="transform: scale(0.7)" :checked="isSettle" />全选
			</view>

			<view class="flex align-center">
				<view class="bg-danger rounded text-center py-2 text-white font-sm" style="width: 220rpx"
					hover-class="bg-hover-info" :hover-stay-time="150" @click="Multiple_deletions" :disabled="disabled">
					删除</view>
			</view>
		</view>
		<!-- 底部切换 -->
		<tabsBottom :tabId="1"></tabsBottom>
	</view>
</template>

<script>
const app = getApp();
import tabsBottom from "@/components/tabs/tabs-bottom-Merchant.vue";
import {
	accMul,
	accAdd
} from "@/static/js/GeneralUtil.js";
import {
	WXEditShopCarQuantity,
	WXClearShopCarQuantity
} from "@/api/article.js";
import {
	WholesalePriceShopCarAll
} from "@/api/merchant.js";
export default {
	components: {
		tabsBottom,
	},
	data() {
		return {
			Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
			ShareOpenID: "",
			fixedHeight: 0, //底部元素高度
			isSettle: false, //全选按钮
			shopCar: [], //购物车数据
			NewShopCar: [], //选中购物车数据
			Delete_Car: [], //删
			Quantity: "0.00", //合计
			show: null,
			Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			form: {
				Data: "表名",
				page: 1, //页数
				limit: 10 //每页数据条数
			},
			switchBoolean: false,
			options2: [{
				text: "删除",
				style: {
					backgroundColor: "#F56C6C",
				},
			},],
			isOpened: "none",
			isActive: "Min_0",
			disabled: false, //是否禁用
		};
	},
	computed: {
		Price() {
			//补零
			return function (price) {
				if (price) {
					if (RegExp(/\./).exec(price)) {
						return price;
					} else {
						return price + ".00";
					}
				} else {
					return "0.00";
				}
			};
		},
	},
	onLoad() {
		this.fixed();
		this.selectGoods();
	},
	methods: {
		//切换方案
		toggleStyle(item, key) { //切换
			item.isActive = key;
			console.log(item, 'zyx', key);
		},
		//多条删除
		Multiple_deletions() {
			const _this = this;
			_this.disabled = true
			uni.showModal({
				title: "提示",
				content: "确定要删除所选商品吗?",
				success: async function (res) {
					console.log('aaaa',res);
					if (res.confirm) {
						// 调接口删除
						const res = await WXClearShopCarQuantity({
							Open_ID: app.globalData.openid,
							Sales_Order_SerialNumber: JSON.stringify(_this.Delete_Car)
						})
						_this.selectGoods();
						_this.disabled = false;
					} else if (res.cancel) {
						uni.showToast({
							title: "已取消",
							icon: "none",
						});
					}
				},
			});
		},
		//切换
		switchMethods() {
			this.switchBoolean = !this.switchBoolean
		},
		//底部模块高度获取
		fixed() {
			const query = uni.createSelectorQuery();
			query
				.select("#fixed")
				.boundingClientRect((data) => {
					this.fixedHeight = data.height;
				})
				.exec();
		},
		//查询购物车内容
		async selectGoods() {
			const res = await WholesalePriceShopCarAll({
				Enterprise_Info_SerialNumber: app.globalData.memberInfo.Enterprise_Info_SerialNumber,
			})
			console.log(res, 'AAAA');
			res.Data.forEach((item) => {
				item.quantity = parseInt(item.Unit_Quantity);
				item.isSettle = false;
				item.isActive = 0;
				item.Transaction_Type = 0;
				item.Amount = item.quantity * item.Paystages[item.isActive].Unit_Price;
			})
			this.shopCar = res.Data;
			console.log(this.shopCar,'abc');
		},
		calculate() { //计算总价
			let Amount = 0;
			if (this.NewShopCar.length > 0) {
				this.NewShopCar.forEach((item) => {
					Amount = accAdd(Amount, item.Amount);
				});

			}
			this.Quantity = Amount;
		},
		//商品详情跳转
		goDetail(
			Article_SerialNumber,
			Sales_Unit_Price_SerialNumber,
			Store_SerialNumber,
			Sales_Unit_Price
		) {
			uni.navigateTo({
				url: "/pages/index/details?Article_SerialNumber=" +
					Article_SerialNumber +
					"&Sales_Unit_Price_SerialNumber=" +
					Sales_Unit_Price_SerialNumber +
					"&Store_SerialNumber=" +
					Store_SerialNumber +
					"&Sales_Unit_Price=" +
					Sales_Unit_Price +
					"&ShareOpenid=" +
					this.ShareOpenID,
			});
		},
		//全选
		changeAll(index) {
			this.shopCar[index].isSettle = !this.shopCar[index].isSettle;
			this.NewShopCar = this.shopCar.filter((item) => {
				return item.isSettle == true;
			});
			this.Delete_Car = this.shopCar.map(item => item.Sales_Order_SerialNumber);
			this.calculate();
			//全选状态
			if (this.NewShopCar.length == this.shopCar.length) {
				this.isSettle = true;
			} else {
				this.isSettle = false;
			}
		},
		//全选
		changeAll_() {
			if (this.shopCar.length > 0) {
				this.isSettle = !this.isSettle;
				if (this.isSettle == true) {
					this.shopCar.forEach((item) => {
						if (item.isShow) {
							item["isSettle"] = true;
						}
					});
					this.NewShopCar = this.shopCar.filter((item) => item.isShow);
					this.Delete_Car = this.shopCar.map(item => item.Sales_Order_SerialNumber);
					this.calculate();
				} else {
					this.shopCar.forEach((item) => {
						item["isSettle"] = false;
					});
					this.NewShopCar = [];
					this.calculate();
				}
			}
		},
		handleSkip(i) {
			if (this.NewShopCar.length > 0) {
				uni.setStorageSync(
					"Store_SerialNumber",
					this.NewShopCar[0].Store_SerialNumber
				);

				uni.navigateTo({
					url: `/pages/Merchant/submitOrderCar?SalesOrder=${encodeURIComponent(JSON.stringify(this.NewShopCar))}&key=${i}`
				});
			} else {
				uni.showToast({
					title: "请选择商品后再结算",
					icon: "none",
				});
			}
		},
		async subGoods(item) {
			console.log('bbbbb', item);
			if (item.quantity > parseInt(item.Unit_Quantity)) {
				for (const key in item.Paystages) {
					if (item.quantity > item.Unit_Quantity) {
						item.Amount = item.quantity * (item.Paystages[key].Unit_Price * item.Paystages[key]
							.Full_Payment.Trading_Percentage);
						item.quantity = item.quantity - 10;
						console.log('aaaaaaa');
					} else {
						item.Amount = item.quantity * item.Paystages[key].Unit_Price * item.Paystages[key]
							.Payment_Days[0].Trading_Percentage
						item.quantity = item.quantity - 10;
					}
				}
			} else {
				uni.showToast({
					title: '该商品不能小于最低购买量',
					icon: "none",
					duration: 2000 // 持续时间，单位毫秒
				});
			}
		},
		async addGoods(item) {
			console.log(item, 'cccc');
			item.quantity = parseInt(item.quantity) + parseInt(item.Unit_Quantity);
			for (const key in item.Paystages) {
				console.log(1111, key);
				if (item.quantity > item.Paystages[key].Full_Payment.Min_Quantity) {
					console.log(1111);
					item.Amount = item.quantity * item.Paystages[key].Unit_Price;
				} else {
					console.log(222);
					item.Amount = item.quantity * item.Paystages[key].Unit_Price;
				}
			}
		},
		deleteGoods(id, index) {
			//删除购物车里的商品
			let _this = this;
			uni.showModal({
				title: "提示",
				content: "确定要删除该商品吗?",
				success: function (res) {
					if (res.confirm) {
						// 调接口删除
						uni.request({
							header: {
								"Content-Type": "application/x-www-form-urlencoded",
							},
							url: app.globalData.Domain_Name + "/WXCancelShopCar",
							method: "POST",
							data: {
								Open_ID: app.globalData.openid,
								Enterprise_Info_SerialNumber: app.globalData.enterprise,
								Sales_Order_SerialNumber: id,
							},
							success: (res) => {
								if (res.data.Status == "success") {
									_this.selectGoods();
									uni.showToast({
										title: "删除成功",
										icon: "none",
									});
									_this.jia_and_jian(index);
								}
							},
						});
					} else if (res.cancel) {
						uni.showToast({
							title: "已取消",
							icon: "none",
						});
					}
				},
			});
		},
		jia_and_jian(index) {
			this.shopCar[index].isSettle = false;
			this.NewShopCar = this.shopCar.filter((item) => {
				return item.isSettle == true;
			});
			this.calculate();
			//全选状态
			if (this.NewShopCar.length == this.shopCar.length) {
				this.isSettle = true;
			} else {
				this.isSettle = false;
			}
		},
		goIndex() {
			uni.redirectTo({
				url: "/pages/index/index",
			});
		},
	},
};
</script>

<style>
page {
	background-color: #f8f9fa;
}

/* .table {


		view {
			text-align: center;
			width: 100%;
		}

		.th {

		}

		.td {

		}
	} */
</style>
<style></style>